

<!DOCTYPE html>
<html lang="zh-CN" color-mode=light>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue项目中兼容IE浏览器 - 阿Q&#39;s Blog</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />
  
  <meta name="description" content="项目采用vue全家桶和elementUI等插件技术，I...">
  <meta name="author" content="阿Q">
  <link rel="icon" href="/images/icons/favicon-16x16.png" type="image/png" sizes="16x16">
  <link rel="icon" href="/images/icons/favicon-32x32.png" type="image/png" sizes="32x32">
  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon.png" sizes="180x180">
  <meta rel="mask-icon" href="/images/icons/stun-logo.svg" color="#333333">
  
    <meta rel="msapplication-TileImage" content="/images/icons/favicon-144x144.png">
    <meta rel="msapplication-TileColor" content="#000000">
  

  
<link rel="stylesheet" href="/css/style.css">


  
    
<link rel="stylesheet" href="//at.alicdn.com/t/font_1445822_r673sha78lq.css">

  

  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
    
      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css" name="highlight-style" mode="light">

      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-dark.min.css" name="highlight-style" mode="dark">

      
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      lazyload: {
        enable: true,
        only_post: 'false',
        loading: '/images/theme/loading.gif'
      },
      donate: {
        enable: true,
        alipay: 'https://gitee.com/aQjourney/blogPictures/raw/master/pic/20210331182417.png',
        wechat: 'https://gitee.com/aQjourney/blogPictures/raw/master/pic/20210331182553.png'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        always_show: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: true
      },
      preview: {
        background: {
          default: '',
          api: 'https://gitee.com/aQjourney/blogPictures/raw/master/pic/20210401221747.jpg'
        },
        motto: {
          default: '我在开了灯的床头下，想问问自己的心啊。',
          typing: true,
          api: 'https://v2.jinrishici.com/one.json',
          data_contents: '["data","content"]'
        },
      },
      qrcode: {
        enable: true,
        type: 'url',
        image: 'https://pic.izhaoo.com/weapp-code.jpg',
      },
      toc: {
        enable: true
      },
      scrollbar: {
        type: 'default'
      },
      notification: {
        enable: false,
        delay: 4500,
        list: '',
        page_white_list: '',
        page_black_list: ''
      },
      search: {
        enable: true,
        path: '/search.xml'
      }
    }
  </script>

  

  

<meta name="generator" content="Hexo 5.3.0"><link rel="alternate" href="/atom.xml" title="阿Q's Blog" type="application/atom+xml">
</head>

<body class="lock-screen">
  <div class="loading"></div>
  
    


  <nav class="navbar">
    <div class="left">
      
        <i class="iconfont iconhome j-navbar-back-home"></i>
      
      
        <i class="iconfont iconqrcode j-navbar-qrcode"></i>
      
      
        <i class="iconfont iconmoono" id="color-toggle" color-toggle="light"></i>
      
      
        <i class="iconfont iconsearch j-navbar-search"></i>
      
    </div>
    <div class="center">Vue项目中兼容IE浏览器</div>
    <div class="right">
      <i class="iconfont iconmenu j-navbar-menu"></i>
    </div>
    
      <div id="qrcode-navbar"></div>
    
  </nav>

  
  

<nav class="menu">
  <div class="menu-container">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content"><li class="menu-item">
        <a href="/ " class="underline "> 首页</a>
      </li><li class="menu-item">
        <a href="/archives/ " class="underline "> 归档</a>
      </li><li class="menu-item">
        <a href="/tags/ " class="underline "> 标签</a>
      </li><li class="menu-item">
        <a href="/categories/ " class="underline "> 分类</a>
      </li><li class="menu-item">
        <a href="/about/ " class="underline "> 关于</a>
      </li></ul>
    
      <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p></div>
    
  </div>
</nav>
  <main id="main">
  <div class="article-wrap">
    <div class="row container">
      <div class="col-xl-3"></div>
      <div class="col-xl-6"><article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="https://gitee.com/aQjourney/blogPictures/raw/master/pic/20210401182309.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">Vue项目中兼容IE浏览器</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>一月 27, 2021</span>
      
        <span class="post-info-item">
          <i class="iconfont iconeye"></i><span id="/2021/01/27/Vue%E9%A1%B9%E7%9B%AE%E5%85%BC%E5%AE%B9IE%E6%B5%8F%E8%A7%88%E5%99%A8/" class="leancloud" data-flag-title="Vue项目中兼容IE浏览器"></span>
        </span>
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>3672</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content">
        <p>项目采用<code>vue</code>全家桶和<code>elementUI</code>等插件技术，<code>IE9+</code>需要安装<code>babel-polyfill</code>插件，将项目中的<code>es6</code>语法转换为目标浏览器兼容的低版本语法。</p>
<p>注意：<code>vue</code>框架默认<code>不支持ie8及以下</code>，使用<code>Webpack</code>版本要高于<code>2.6.1</code>。</p>
<h1 id="项目背景"><a href="#项目背景" class="headerlink" title="项目背景"></a>项目背景</h1><p>项目采用<code>vue</code>全家桶和<code>elementUI</code>等插件技术，<code>vue</code>框架默认不支持<code>ie8</code>及以下，<code>ie9+</code>需要安装<code>babel-polyfill</code>插件，将项目中的<code>es6</code>语法转换为目标浏览器兼容的低版本语法。</p>
<p>注意：使用<code>Webpack</code>版本要高于<code>2.6.1</code></p>
<h1 id="基本配置"><a href="#基本配置" class="headerlink" title="基本配置"></a>基本配置</h1><figure class="highlight mercury"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs mercury">ie调试空白：babel-polyfill已配置，可跳过此节<br>axios对<span class="hljs-keyword">promise</span>进行兼容，可以只用es6-<span class="hljs-keyword">promise</span><br>    先安装：<br>        npm install es6-<span class="hljs-keyword">promise</span> --save-dev<br>    后配置main.js： <br>        import <span class="hljs-keyword">promise</span> from <span class="hljs-string">&#x27;es6-promise&#x27;</span><br>        <span class="hljs-keyword">promise</span>.polyfill() <br>    跳至第<span class="hljs-number">3</span>步<br></code></pre></td></tr></table></figure>
<ol>
<li><p>安装<code>babel-polyfill</code>插件。</p>
<p><code>npm install --save babel-polyfill</code></p>
</li>
<li><p>在<code>main.js</code>中的最前面引入<code>babel-polyfill</code>。</p>
<p><code>import &#39;babel-polyfill&#39;</code></p>
</li>
<li><p>在<code>index.html</code>加入以下代码（非必须）。</p>
<p><code>&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;</code></p>
</li>
<li><p>在<code>config</code>中的<code>webpack.base.conf.js</code>中，找到<code>entry</code>并修改编译配置。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">entry</span>:&#123;<br>    <span class="hljs-attribute">app</span>: [<span class="hljs-string">&#x27;babel-polyfill&#x27;</span>,<span class="hljs-string">&#x27;./src/main.js&#x27;</span>]<br>&#125;<br></code></pre></td></tr></table></figure></li>
<li><p>配置<code>package.json</code>文件中<code>browserslist</code>字段。</p>
<figure class="highlight prolog"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs prolog"><span class="hljs-string">&quot;browserslist&quot;</span>: [<br>    <span class="hljs-string">&quot;&gt; 1%&quot;</span>,<br>    <span class="hljs-string">&quot;last 2 versions&quot;</span>,<br>    <span class="hljs-string">&quot;not ie &lt;= 8&quot;</span><br>  ]<br></code></pre></td></tr></table></figure></li>
<li><p>在<code>config</code>中的<code>webpack.base.conf.js</code>中，找到<code>loader</code>为<code>&quot;babel-loader&quot;</code>，修改<code>include</code>中的内容，向其中添加<code>resolve(&quot;static&quot;)</code>，<code>static</code>文件中可能存在<code>es6</code>语法，提前添加该文件，下图为参照，其他内容这里不用考虑，这步只要添加<code>static</code>即可。</p>
<p><img    class="lazyload" data-original="https://gitee.com/aQjourney/blogPictures/raw/master/pic/20210129114900.png" src=""   ><span class="image-caption">image-20210127135420101</span></p>
</li>
<li><p>检查目录下是否有<code>.babelrc</code>文件，如果没有自行创建，配置内容如下。</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs json">&#123;<br>  <span class="hljs-attr">&quot;presets&quot;</span>: [<br>    [<br>      <span class="hljs-string">&quot;env&quot;</span>,<br>      &#123;<br>        <span class="hljs-attr">&quot;modules&quot;</span>: <span class="hljs-literal">false</span>,<br>        <span class="hljs-attr">&quot;useBuiltIns&quot;</span>: <span class="hljs-string">&quot;entry&quot;</span><br>      &#125;<br>    ],<br>    <span class="hljs-string">&quot;stage-2&quot;</span><br>  ],<br>  <span class="hljs-attr">&quot;plugins&quot;</span>: [<br>    <span class="hljs-string">&quot;transform-runtime&quot;</span><br>  ]<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight gradle"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs gradle">配置代码解读：<br><span class="hljs-number">1</span>.modules该参数的含义是：启用将ES6模块语法转换为另一种模块类型。将该设置为<span class="hljs-keyword">false</span>就不会转换模块。默认为 commonjs. 这样做的目的是：以前我们需要使用babel来将ES6的模块语法转换为AMD, CommonJS，UMD之类的模块化标准语法，但是现在webpack都帮我做了这件事了，所以我们不需要babel来做，因此需要在`babel`配置项中设置modules为<span class="hljs-keyword">false</span>，因为它默认值是commonjs, 否则的话，会产生冲突。<br><span class="hljs-number">2</span>.useBuiltIns是指定哪些内容需要被 polyfill(兼容) 的设置，有三个设置选项<br>    <span class="hljs-keyword">false</span> - 不做任何操作 <br>    entry - 根据浏览器版本的支持，将 polyfill 需求拆分引入，仅引入有浏览器不支持的polyfill <br>    usage - 检测代码中 ES6<span class="hljs-regexp">/7/</span><span class="hljs-number">8</span> 等的使用情况，仅仅加载代码中用到的 polyfill <br><span class="hljs-number">3</span>.stage-<span class="hljs-number">2</span>官方预设(preset), 有两种，一个是按年份(babel-preset-es2017)，一个是按阶段(babel-preset-stage-<span class="hljs-number">0</span>)。 这主要是根据TC39 委员会ECMASCRPIT 发布流程来制定的。 因此到目前为止 有<span class="hljs-number">4</span>个不同的阶段预设：stage-<span class="hljs-number">0</span>,<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>以上每种预设都依赖于紧随的后期阶段预设，也就是说stage-<span class="hljs-number">0</span>是包括stage-<span class="hljs-number">1</span>的，以此类推。 因此 stage-<span class="hljs-number">0</span>包含stage-<span class="hljs-number">1</span><span class="hljs-regexp">/2/</span><span class="hljs-number">3</span>的内容。所以如果我们不知道需要哪个stage-x的话，直接引入stage-<span class="hljs-number">0</span>就好了。 目前一般是使用`stage-<span class="hljs-number">2</span> `(https:<span class="hljs-comment">//babeljs.io/docs/en/babel-preset-stage-2) 该特性规范己经被起草，将会被纳入标准里</span><br><span class="hljs-number">4</span>.transform-<span class="hljs-keyword">runtime</span> 是利用 plugin 自动识别并替换代码中的新特性，你不需要再引入，只需要装好 babel-<span class="hljs-keyword">runtime</span> 和 配好 plugin 就可以了。 好处是按需替换，检测到你需要哪个，就引入哪个 polyfill，如果只用了一部分，打包完的文件体积对比 babel-polyfill 会小很多。<br></code></pre></td></tr></table></figure>
<p>​        到这里一般ie空白问题解决。</p>
</li>
</ol>
<h1 id="ie调试仍空白解决办法"><a href="#ie调试仍空白解决办法" class="headerlink" title="ie调试仍空白解决办法"></a>ie调试仍空白解决办法</h1><p>​        Ie报错问题仍然是有部分es6语法没有被转换，可能是因为使用的插件没有被转换，解决办法如下。</p>
<ol>
<li><p><code>F12</code>进入控制台，查看错误</p>
<p><img    class="lazyload" data-original="https://gitee.com/aQjourney/blogPictures/raw/master/pic/20210129114901.png" src=""   ><span class="image-caption">image-20210127134744597</span></p>
</li>
<li><p>点击<code>app.js</code>跳转到出错位置</p>
<p><img    class="lazyload" data-original="https://gitee.com/aQjourney/blogPictures/raw/master/pic/20210129114902.png" src=""   ><span class="image-caption">image-20210127134807122</span></p>
</li>
<li><p>复制出错文件路径（最前面的<code>./</code>不用复制）</p>
<p><code>node_modules/image-conversion/build/conversion.js</code></p>
<p><img    class="lazyload" data-original="https://gitee.com/aQjourney/blogPictures/raw/master/pic/20210129114903.png" src=""   ><span class="image-caption">image-20210127134911975</span></p>
</li>
<li><p>在<code>config</code>中的<code>webpack.base.conf.js</code>中，找到<code>loader</code>为<code>&quot;babel-loader&quot;</code>，修改<code>include</code>中的内容，将刚刚复制的路径添加到其中。</p>
<p><code>resolve(&#39;node_modules/image-conversion/build/conversion.js&#39;)</code>。</p>
<p><img    class="lazyload" data-original="https://gitee.com/aQjourney/blogPictures/raw/master/pic/20210129114904.png" src=""   ><span class="image-caption">image-20210127135305110</span></p>
</li>
<li><p>其他类似的错误重复此过程，直到没有报错，空白问题解决。</p>
</li>
</ol>
<h1 id="其他兼容问题"><a href="#其他兼容问题" class="headerlink" title="其他兼容问题"></a>其他兼容问题</h1><p> 完成上述过程，空白已经解决，未遇到样式不兼容等问题，样式问题可参考如下（未测试）</p>
<ol>
<li><p>若使用了CSS<code>var()</code>，安装相应的polyfill，<code>css-vars-ponyfill</code>。</p>
<p><code>npm install --save css-vars-ponyfill</code></p>
</li>
<li><p>配置<code>main.js</code>文件。</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs stylus">import cssVars from <span class="hljs-string">&#x27;css-vars-ponyfill&#x27;</span><br><span class="hljs-function"><span class="hljs-title">cssVars</span><span class="hljs-params">(&#123;&#125;)</span></span><br></code></pre></td></tr></table></figure>
<p>​        喝口水想一想静静。</p>
</li>
</ol>
<h1 id="简易服务器"><a href="#简易服务器" class="headerlink" title="简易服务器"></a>简易服务器</h1><p>兼容问题解决之后，可搭建简易服务器查看项目在服务器上运行的效果。</p>
<ol>
<li><p>打包项目 。</p>
<p> <code>npm run build</code></p>
</li>
<li><p>进入<code>dist</code>文件夹。</p>
<p> <code>cd dist</code></p>
</li>
<li><p>安装简易服务器。</p>
<p> <code>npm install http-server -g</code></p>
</li>
<li><p>运行服务器。</p>
<p> <code>http-server</code></p>
</li>
<li><p>结果如图，访问即可。</p>
<p> <img    class="lazyload" data-original="https://gitee.com/aQjourney/blogPictures/raw/master/pic/20210129114905.png" src=""   ><span class="image-caption">image-20210127153921606</span></p>
</li>
</ol>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>现在ie微软已经不在维护，兼容ie就要写或者转换成ie支持的语法，配置完调试报错也是因为项目中仍然有部分语法没有被转换，继续寻找解决办法。</p>
<p>参考：</p>
<p><a target="_blank" rel="noopener" href="https://blog.csdn.net/z1832729975/article/details/103120872">https://blog.csdn.net/z1832729975/article/details/103120872</a></p>
<p><a target="_blank" rel="noopener" href="https://blog.csdn.net/landl_ww/article/details/79149461">https://blog.csdn.net/landl_ww/article/details/79149461</a></p>
<p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/songfengyang/p/12851813.html">https://www.cnblogs.com/songfengyang/p/12851813.html</a></p>
<p><a target="_blank" rel="noopener" href="https://blog.csdn.net/ligang2585116/article/details/103554818">https://blog.csdn.net/ligang2585116/article/details/103554818</a></p>

      </section>
      <section class="extra">
        
          <ul class="copyright">
  
    <li><strong>本文作者：</strong>阿Q</li>
    <li><strong>本文链接：</strong><a href="https://aqjourney.gitee.io/2021/01/27/Vue%E9%A1%B9%E7%9B%AE%E5%85%BC%E5%AE%B9IE%E6%B5%8F%E8%A7%88%E5%99%A8/index.html" title="https:&#x2F;&#x2F;aqjourney.gitee.io&#x2F;2021&#x2F;01&#x2F;27&#x2F;Vue%E9%A1%B9%E7%9B%AE%E5%85%BC%E5%AE%B9IE%E6%B5%8F%E8%A7%88%E5%99%A8&#x2F;index.html">https:&#x2F;&#x2F;aqjourney.gitee.io&#x2F;2021&#x2F;01&#x2F;27&#x2F;Vue%E9%A1%B9%E7%9B%AE%E5%85%BC%E5%AE%B9IE%E6%B5%8F%E8%A7%88%E5%99%A8&#x2F;index.html</a></li>
    <li><strong>版权声明：</strong>本博客所有文章均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" title="BY-NC-SA" target="_blank" rel="noopener">BY-NC-SA</a> 许可协议，转载请注明出处！</li>
  
</ul>
        
        
          <section class="donate">
  <div id="qrcode-donate">
    <img   class="lazyload" data-original="https://gitee.com/aQjourney/blogPictures/raw/master/pic/20210331182417.png" src="" >
  </div>
  <div class="icon">
    <a href="javascript:;" id="alipay"><i class="iconfont iconalipay"></i></a>
    <a href="javascript:;" id="wechat"><i class="iconfont iconwechat-fill"></i></a>
  </div>
</section>
        
        
  <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/ie/" rel="tag">ie</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue/" rel="tag">vue</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%85%BC%E5%AE%B9/" rel="tag">兼容</a></li></ul> 

        
  <nav class="nav">
    <a href="/2021/01/28/win10%E4%B8%ADIE%E7%9A%84%E5%88%A0%E9%99%A4%E5%8D%B8%E8%BD%BD%E6%81%A2%E5%A4%8D%E4%B8%8E%E6%9C%AA%E5%93%8D%E5%BA%94%E9%97%AA%E9%80%80/"><i class="iconfont iconleft"></i>win10中IE的删除卸载恢复与未响应闪退低版本</a>
    <a></a>
  </nav>

      </section>
      
        <section class="comments">
  
    <div class="btn" id="comments-btn">查看评论</div>
  
  
<div id="valine"></div>
<script defer src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
  window.onload = function () {
    var loadValine = function () {
      new Valine({
        el: '#valine',
        app_id: "K1gCtuKBEEOccKt5N3LgEPVI-gzGzoHsz",
        app_key: "EN0GNbNNActprM8nUaKDna0x",
        placeholder: "雁过留痕",
        avatar: "mp",
        pageSize: "10",
        lang: "zh-CN",
      });
    }
    if ( true ) {
      $("#comments-btn").on("click", function () {
        $(this).hide();
        loadValine();
      });
    } else {
      loadValine();
    }
  };
</script>

</section>
      
    </section>
  </div>
</article></div>
      <div class="col-xl-3">
        
          
  <aside class="toc-wrap">
    <h3 class="toc-title">文章目录：</h3>
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%A1%B9%E7%9B%AE%E8%83%8C%E6%99%AF"><span class="toc-text">项目背景</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE"><span class="toc-text">基本配置</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#ie%E8%B0%83%E8%AF%95%E4%BB%8D%E7%A9%BA%E7%99%BD%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95"><span class="toc-text">ie调试仍空白解决办法</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98"><span class="toc-text">其他兼容问题</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%AE%80%E6%98%93%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-text">简易服务器</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-text">总结</span></a></li></ol>
  </aside>

        
      </div>
    </div>
  </div>
</main>
  

<footer class="footer">
  <div class="footer-social"></div>
  
    <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p></div>
  
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
    <div class="fab fab-daovoice">
      <i class="iconfont iconcomment"></i>
    </div>
  
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
  
  
    
<script src="/js/color-mode.js"></script>

  
  
    <div class="search">
  <div class="search-container">
    <div class="search-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <div class="search-input-wrapper">
      <i class="search-input-icon iconfont iconsearch"></i>
      <input class="search-input" type="search" id="search-input" placeholder="Search..." autofocus autocomplete="off"
        autocorrect="off" autocapitalize="off">
    </div>
    <div class="search-output" id="search-output"></div>
  </div>
</div>
  
</body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>



  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>






  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>




<script src="/js/utils.js"></script>
<script src="/js/script.js"></script>



  <script>
  $.getScript("//cdn.jsdelivr.net/npm/leancloud-storage@4.1.0/dist/av-min.js", () => {

    AV.init({
      appId: 'K1gCtuKBEEOccKt5N3LgEPVI-gzGzoHsz',
      appKey: 'EN0GNbNNActprM8nUaKDna0x',
      serverURLs: 'https://leancloud.cn/',
    });

    const showCount = (Counter) => {
      const asyncLimit = new AsyncLimit(2);
      $(".leancloud").each(async (e) => {
        const url = $(".leancloud").eq(e).attr('id').trim();
        const query = new AV.Query("Counter");
        query.equalTo("words", url);
        let count = await asyncLimit.run(() => query.count());
        $(".leancloud").eq(e).text(count ? count : '--');
      });
    }

    const addCount = (Counter) => {
      const url = $(".leancloud").length === 1 ? $(".leancloud").attr('id').trim() : 'https://aqjourney.gitee.io';
      var query = new Counter;
      query.save({
        words: url
      });
    }

    $(function () {
      const Counter = AV.Object.extend("Counter");
      addCount(Counter);
      showCount(Counter);
    });

  });
</script>



  

<script>
  (function (i, s, o, g, r, a, m) {
    i["DaoVoiceObject"] = r;
    i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date();
    a = s.createElement(o), m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    a.charset = "utf-8";
    m.parentNode.insertBefore(a, m)
  })(window, document, "script", "https://widget.daovoice.io/widget/0f81ff2f.js", "daovoice")
  daovoice('init', {
    app_id: "1f3f005d"
  }, {
    launcher: {
      disableLauncherIcon: true,
    },
  });
  daovoice('update');
</script>



  <script>
    (function () {
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>



  <script defer src='https://hm.baidu.com/hm.js?6d9db2261415e589ed19df24b66264fd'></script>











</html>